<template>
	<view class="list">
		<view class="item" v-for="item in couponList" @tap="toViewInfo(item)">
			<view class="left">
				<view :class="{ 'amount': true, 'amount-ed': (item.state === 1 || item.state === 2 || item.state === 4)  }" >
					<text>￥</text>
					<text>{{ item.couponPrice ? item.couponPrice / 100 : 0 }}</text>
					<view class="payAmount">
						满{{item.payAmount/100}}元使用
					</view>
				</view>

				<view :class="{ 'type' : true, 'type-ed' : item.state === 1 || item.state === 2 || item.state === 4 }">
					<text v-if="item.couponType === 1">支付宝满减券</text>
					<text v-else-if="item.couponType === 2">支付宝随机减券</text>
					<text v-else-if="item.couponType === 3">微信满减券</text>
					<text v-else-if="item.couponType === 4">微信随机减券</text>
					<text v-else-if="item.couponType === 5">微信代金券</text>
					<text v-else>其他</text>
				</view>
			</view>
			<view class="right">
				<view class="info">
					<!-- 满100.01元立减100元 -->
					<view class="title">{{ item.couponName }}</view>
					<!-- <view class="desc">{{111}}</view> -->
					<view class="over-time">有效期至{{ item.overTime }}</view>
				</view>
				<view v-if="item.state === 0" class="state">立即使用</view>
				<image v-else-if="item.state === 1" src="../../static/new/user/cancelled.png"></image>
				<image v-else-if="item.state === 2" src="../../static/new/user/expired.png"></image>
				<view v-else-if="item.state === 3" class="state">去激活</view>
				<image v-else-if="item.state === 4" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/075cd4e4-9797-40c0-bdc5-39a177a6f1f9.png"></image>
			</view>
		</view>
	</view>
	<gzListNull :list="couponList"></gzListNull>
</template>

<script setup>
	import dayjs from 'dayjs'
	import { defineProps } from 'vue'
	
	const props = defineProps({
		// 卡券列表
		couponList: {
			type: Array,
			default: []
		}
	})
	/**
	 * 跳转卡券详情页面
	 */
	const toViewInfo = (e) => {
		uni.navigateTo({
			url: `/pageUser/myCoupon/viewInfo?fansAwardId=${e.fansAwardId}&couponId=${e.couponId}`
		});
	}
</script>

<style lang="less">
	.list {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 24rpx;
		padding: 24rpx 24rpx 0;
		box-sizing: border-box;

		.item {
			display: flex;

			.left {
				width: 220rpx;
				height: 220rpx;
				// flex: 2;
				flex-shrink: 0;
				position: relative;
				// .payAmount{
				// 	position: absolute;
				// 	top: 150rpx;
				// }
				.amount {
					// padding: 46rpx 0;
					width: 220rpx;
					height: 170rpx;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					background-position: 0 0;
					flex-shrink: 0;
					color: #fff;
					position: relative;
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: center;
					background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/3dd1efb6-9cc4-4694-b461-e2d25ee7af9a.png');
					.payAmount{
						position: absolute;
						bottom: 10rpx;
						font-size: 24rpx;
					}
				// :style="{ backgroundImage: (item.state === 1 || item.state === 2) ? `url(${vdata.couponedBg})` : `url(${''})` }"
					text {
						position: relative;
						z-index: 99;

						&:nth-of-type(1) {
							font-weight: bold;
							font-size: 32rpx;
						}

						&:nth-of-type(2) {
							font-weight: bold;
							font-size: 60rpx;
						}
					}
				}
				.amount-ed{
					color: #8C8EA0;
					background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/2162d30c-bb5f-444f-9703-92fcaeafd8d3.png');
				}

				.type {
					height: 50rpx;
					background: #FADB9A;
					color: #B17622;
					// padding: 14rpx 0;
					text-align: center;
					line-height: 50rpx;
					border-radius: 0 0 0 20rpx;
					font-size: 24rpx;
					position: relative;
					background: #F9D791;

					&::after {
						content: '';
						// height: 80px;
						border: 10rpx dotted #fff;
						position: absolute;
						right: -14rpx;
						top: 0;
						bottom: 0;
						margin: auto;
					}
				}
				.type-ed{
					background: #E1E2E9;
					color: #8C8EA0;
				}
			}

			.right {
				padding: 0 24rpx;
				box-sizing: border-box;
				width: calc(100% - 220rpx);
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				border-radius: 0 20rpx 20rpx 0;

				.info {
					width: calc(100% - 136rpx);
					padding-right: 24rpx;
					box-sizing: border-box;

					.title {
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
						overflow: hidden; /* 超出部分隐藏 */
						white-space: nowrap; /* 文本不换行 */
						text-overflow: ellipsis; /* 超出部分显示省略号 */
					}

					.desc {
						font-weight: 400;
						font-size: 20rpx;
						color: #FF8833;
						margin: 20rpx 0 16rpx 0;
					}

					.over-time {
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
					}
				}

				.state {
					width: 136rpx;
					height: 56rpx;
					background: #24C789;
					box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(36, 199, 137, 0.3);
					border-radius: 35rpx;
					color: #fff;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				
				image{
					width: 96rpx;
					height: 96rpx;
					margin-bottom: 20rpx;
					align-self: flex-end;
				}
			}
		}
	}
</style>